<template>
  <div class="policy">
    <el-card class="box-card" style="margin-top: 35px;border-radius: 20px;">
      <div class="policy-header">
        <div  style="display: flex;align-items: center">
          <h2>订单列表</h2>
          <!-- <el-button @click="add" icon="el-icon-plus" style="margin-left: 20px;background: #699FF3;color: #fff;border-radius: 10px"></el-button> -->
        </div>

        <div class="search-box" style="display: flex;align-items: center">
          <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.user_name" placeholder="请输入用户名" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.phone" placeholder="请输入寄件人手机号" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.order_no" placeholder="请输入订单号" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.yida_no" placeholder="请输入易达侧订单号" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <!-- <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-select v-model="form.status" placeholder="选择订单状态" clearable style="width: 80%;">
                <el-option label="待取件" value="uncollected"></el-option>
                <el-option label="已取件" value="collected"></el-option>
                <el-option label="运输中" value="shipped"></el-option>
                <el-option label="已签收" value="received"></el-option>
                <el-option label="已取消" value="canceled"></el-option>
                <el-option label="异常状态" value="abnormal"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;align-items: center;margin-bottom: 0">
              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="search">查询</el-button>
            </el-form-item> -->
          </el-form>
        </div>
      </div>
      <div class="search-box" style="display: flex;align-items: center;justify-content: end;">
          <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.delivery_id" placeholder="请输入快递物流单号" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-select v-model="form.status" placeholder="选择订单状态" clearable style="width: 80%;">
                <el-option label="待取件" value="uncollected"></el-option>
                <el-option label="已取件" value="collected"></el-option>
                <el-option label="运输中" value="shipped"></el-option>
                <el-option label="已签收" value="received"></el-option>
                <el-option label="已取消" value="canceled"></el-option>
                <el-option label="异常状态" value="abnormal"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="display: flex;align-items: center;margin-bottom: 0">
              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="search">查询</el-button>
              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="exportBtn">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      <!--       列表-->
      <div class="list">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#F4F4F4',border:'none'}"
        >
          <el-table-column label="运单信息" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">订单号:</div>
                {{ scope.row.order_no }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">快递单号:</div>
                {{ scope.row.yida.delivery_id }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">易达侧订单号:</div>
                {{ scope.row.yida.yida_no }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">用户名:</div>
                {{ scope.row.user.name }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">下单时间:</div>
                {{ scope.row.created_at }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">下单渠道:</div>
                {{ scope.row.delivery_business_name }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">预约开始时间:</div>
                {{ scope.row.pickup_start_time }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">预约结束时间:</div>
                {{ scope.row.pickup_end_time }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="客户信息" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">发件人:</div>
                {{ scope.row.send_address.name }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">发件人电话:</div>
                {{ scope.row.send_address.phone }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">收件人:</div>
                {{ scope.row.receive_address.name }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">收件人电话:</div>
                {{ scope.row.receive_address.phone }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="物品信息" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">货物名称:</div>
                {{ scope.row.goods_name }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">包裹数量:</div>
                {{ scope.row.package_count }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">重量:</div>
                {{ scope.row.weight }}kg
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">体积:</div>
                {{ scope.row.volume }}cm³
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">总价:</div>
                {{ scope.row. total_price }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">已支付金额:</div>
                {{ scope.row.pay_amount }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">应付金额:</div>
                {{ scope.row.need_pay }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">优惠金额:</div>
                {{ scope.row.discount }}
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">支付时间:</div>
                {{ scope.row.paid_at }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-wrap: nowrap;margin-bottom: 10px;">
                <div style="width: 80px;text-align: left;">快递员信息:</div>
                {{ scope.row.yida.courier_name }}-{{ scope.row.yida.courier_phone }}
              </div>
              <!-- <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">快递员电话:</div>

              </div> -->
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">支付状态:</div>
                <el-tag type="danger" v-if="scope.row.pay_status=='unpaid'">未支付</el-tag>
                <el-tag type="success" v-if="scope.row.pay_status=='paid'">已支付</el-tag>
                <el-tag type="info" v-if="scope.row.pay_status=='no_need'">无需支付</el-tag>
                <el-tag type="warning" v-if="scope.row.pay_status=='supplementary'">待补单</el-tag>
              </div>
              <div style="display: flex;flex-wrap: nowrap;">
                <div style="width: 80px;text-align: left;">订单状态:</div>
                <span v-if="scope.row.status=='uncollected'">待取件</span>
                <span v-if="scope.row.status=='collected'">已取件</span>
                <span v-if="scope.row.status=='shipped'">运输中</span>
                <span v-if="scope.row.status=='received'">已签收</span>
                <span v-if="scope.row.status=='canceled'">已取消</span>
                <span v-if="scope.row.status=='abnormal'">异常状态</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"  align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-view" style="color: #409EFF;" @click="infoBtn(scope.row)">详情</el-button>
              <el-button type="text" size="small" icon="el-icon-position" style="color: #409EFF;" v-if="scope.row.yida.delivery_id" @click="wlBtn(scope.row)">物流轨迹</el-button>
              <el-button type="text" size="small" icon="el-icon-delete" v-if="scope.row.status=='uncollected'" style="color: #409EFF;" @click="delBtn(scope.row)">取消订单</el-button>
              <el-button type="text" size="small" icon="el-icon-delete" style="color: #409EFF;" @click="delLBtn(scope.row)">删除订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-device">
        <Pagingdevice
          ref="paging"
          :total-count="totalCount"
          :current_page="current_page"
          :per_page="per_page"
          @select="select"
          @changep="changep"
        />
      </div>
    </el-card>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="1000px">
      <div>
        <el-descriptions class="margin-top" title="订单详情" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              订单 ID
            </template>
            {{ dataInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单号
            </template>
            {{ dataInfo.order_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              总价
            </template>
            {{ dataInfo.total_price }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              货物名称
            </template>
            {{ dataInfo.goods_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              包裹数量
            </template>
            {{ dataInfo.package_count }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              重量
            </template>
            {{ dataInfo.weight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              体积
            </template>
            {{ dataInfo.volume }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              配送公司
            </template>
            {{ dataInfo.delivery_type }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              配送公司名称
            </template>
            {{ dataInfo.delivery_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              配送公司的业务类型
            </template>
            {{ dataInfo.delivery_business }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              配送公司的业务类型名称
            </template>
            {{ dataInfo.delivery_business_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              备注
            </template>
            {{ dataInfo.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              支付状态
            </template>
            <el-tag type="danger" v-if="dataInfo.pay_status=='unpaid'">未支付</el-tag>
            <el-tag type="success" v-if="dataInfo.pay_status=='paid'">已支付</el-tag>
            <el-tag type="info" v-if="dataInfo.pay_status=='no_need'">无需支付</el-tag>
            <el-tag type="warning" v-if="dataInfo.pay_status=='supplementary'">待补单</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              应付金额
            </template>
            {{ dataInfo.need_pay }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              已支付金额
            </template>
            {{ dataInfo.pay_amount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              状态
            </template>
              <span v-if="dataInfo.status=='uncollected'">待取件</span>
              <span v-if="dataInfo.status=='collected'">已取件</span>
              <span v-if="dataInfo.status=='shipped'">运输中</span>
              <span v-if="dataInfo.status=='received'">已签收</span>
              <span v-if="dataInfo.status=='canceled'">已取消</span>
              <span v-if="dataInfo.status=='abnormal'">异常状态</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              支付时间
            </template>
            {{ dataInfo.paid_at }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              创建时间
            </template>
            {{ dataInfo.created_at }}
          </el-descriptions-item>
          <el-descriptions-item span="3">
            <template slot="label">
              下单用户
            </template>
            {{ dataInfo.user.name  }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" v-if="dataInfo.yida">
              快递单号
            </template>
            {{ dataInfo.yida.delivery_id }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              易达侧订单号
            </template>
            {{ dataInfo.yida.yida_no }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              易达侧优惠金额
            </template>
            {{ dataInfo.yida.discount }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              易达侧快递费
            </template>
            {{ dataInfo.yida.express_fee }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              易达侧保价费
            </template>
            {{ dataInfo.yida.insured_fee }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" v-if="dataInfo.yida">
              易达侧快递状态
            </template>
            <span v-if="dataInfo.yida.status=='uncollected'">待取件</span>
              <span v-if="dataInfo.yida.status=='collected'">已取件</span>
              <span v-if="dataInfo.yida.status=='shipped'">运输中</span>
              <span v-if="dataInfo.yida.status=='received'">已签收</span>
              <span v-if="dataInfo.yida.status=='canceled'">已取消</span>
              <span v-if="dataInfo.yida.status=='abnormal'">异常状态</span>
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              取件码
            </template>
            {{ dataInfo.yida.collected_pickup_code  }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              快递员信息
            </template>
            {{ dataInfo.yida.courier_name+'-'+dataInfo.yida.courier_phone  }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.yida">
            <template slot="label">
              站点名称
            </template>
            {{ dataInfo.yida.site_name  }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.send_address" span="2">
            <template slot="label">
              寄件地址
            </template>
            {{ dataInfo.send_address.province+'-'+dataInfo.send_address.city+'-'+dataInfo.send_address.district+'-'+dataInfo.send_address.detail }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.send_address" span="1">
            <template slot="label">
              寄件人信息
            </template>
            {{ dataInfo.send_address.name+'-'+dataInfo.send_address.phone }}
          </el-descriptions-item>
          <el-descriptions-item v-if="dataInfo.receive_address" span="2">
            <template slot="label">
              收件地址
            </template>
            {{ dataInfo.receive_address.province+'-'+dataInfo.receive_address.city+'-'+dataInfo.receive_address.district+'-'+dataInfo.receive_address.detail }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" v-if="dataInfo.receive_address" span="1">
              收件人信息
            </template>
            {{ dataInfo.receive_address.name+'-'+dataInfo.receive_address.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" v-if="dataInfo.receive_address" span="3">
              支付信息
            </template>
            <el-table
              :data="dataInfo.payments"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="支付 ID"
                align="center">
              </el-table-column>
              <el-table-column
                prop="payable_id"
                label="支付关联 ID"
                align="center">
              </el-table-column>
              <el-table-column
                prop="payable_type"
                label="支付关联类型"
                align="center">
              </el-table-column>
              <el-table-column
                prop="payment_no"
                label="平台支付单号"
                align="center">
              </el-table-column>
              <el-table-column
                prop="transaction_id"
                label="微信侧交易号"
                align="center">
              </el-table-column>
              <el-table-column label="支付类型" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.type=='pay'">支付</span>
                  <span v-if="scope.row.type=='refund'">退款</span>
                </template>
              </el-table-column>
              <el-table-column label="支付方式" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.method=='wechat'">微信支付</span>
                  <span v-if="scope.row.method=='balance'">余额支付</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="amount"
                label="金额"
                align="center">
              </el-table-column>
              <el-table-column
                prop="pay_at"
                label="支付时间"
                align="center">
              </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>

      </div>
    </el-dialog>
    <el-dialog
      title="物流"
      :visible.sync="wlShow"
      width="600px">
      <div style="padding: 30px;padding-left: 0;">
        <el-timeline :reverse="false">
          <el-timeline-item
            v-for="(item, index) in wlList"
            :key="index"
            :timestamp="item.time">
            {{item.desc}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {imgURL,orderList,orderInfo,orderDel,orderTrace,orderDDel,orderExport} from "@/api"
import {getToken, removeToken} from '@/utils/auth'
import Pagingdevice from '@/components/Pagingdevice'
export default {
  name: "musicList",
  components: {
    Pagingdevice,
  },
  data() {
    return {
      token:getToken(),
      state: 'add',
      item:{},
      isShow: false,
      wlShow:false,
      wlList:[],
      imgURL,
      form:{
        order_no:'',
        yida_no:'',
        status:'',
        delivery_id:'',
        phone:'',
        user_name:'',
        start_time:'',
        end_time:''
      },
      date:[],
      dialogVisible:false,
      dataInfo:{
        send_address:{},
        receive_address:{},
        yida:{},
        user:{}
      },
      tableData:[],
      totalCount: 0,
      current_page: 1,
      per_page:10,
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    async getList(){
      console.log('列表')
      this.form.page = this.current_page
      this.form.start_time = this.date?this.date[0]:''
      this.form.end_time = this.date?this.date[1]:''
      await orderList(this.form).then(res=>{
        console.log(res)
        if (res.code==10000){
          this.tableData = res.data.list;
          this.totalCount=res.data.meta.total
        }
      })
    },
    // 搜索
    search(){
      this.current_page=1
      this.getList()
    },
    infoBtn(row){
      orderInfo({id:row.id}).then(res=>{
        console.log(res)
        if(res.code==10000){
          this.dialogVisible = true
          this.dataInfo = res.data
        }
      })

    },
    exportBtn(row){
      this.$confirm('此操作将导出订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.start_time = this.date?this.date[0]:''
          this.form.end_time = this.date?this.date[1]:''
          // orderExport(this.form).then(res=>{
          //   console.log(res)
          //   window.location.href = res
          // })
          window.location.href = `https://pp.scjywkj.com/api/admin/express/order/export?start_time=${this.date?this.date[0]/1000:''}&end_time=${this.date?this.date[1]/1000:''}&token=${this.token}`
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消'
          // });
        });

    },
    delBtn(row){
      this.$confirm('此操作将永久取消该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderDel({id:row.id}).then(res=>{
            if(res.code==10000){
              this.$message({
                message: '取消成功',
                type: 'success'
              });
              this.getList()
            }
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消'
          // });
        });

    },
    delLBtn(row){
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderDDel({id:row.id}).then(res=>{
            if(res.code==10000){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getList()
            }
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消'
          // });
        });

    },
    wlBtn(row){
      orderTrace({
        delivery_id:row.yida.delivery_id
      }).then(res=>{
        console.log(res)
        if(res.code==10000){
          this.wlShow = true
          this.wlList=res.data
        }
      })
    },
    select(num,data){
      this.current_page = num;
      this.per_page = data;
      this.getList()
    },
    changep(num){
      this.current_page = num;
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.policy {
  font-size: 14px;
  padding: 0 80px;
  box-sizing: border-box;
  color: #000;
  &-header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-box {

      //float: right;
      margin-bottom: 5px;
    }
    .add-btn {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background: #1184e6;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
    .add-btn {
      margin-left: 80px;
    }
  }
  .list {
    margin: 30px;
    text-align: center;
  }
  .paging-device {
    margin: 30px;

  }
}

</style>
<style>
.el-table__header-wrapper{
  border-radius: 10px;
}
</style>

